Pure.CSS এর Buttons এবং Button Groups

Pure.CSS ফ্রেমওয়ার্কে Buttons এবং Button Groups সহজে এবং দ্রুত স্টাইল করা যায়। Pure.CSS আপনাকে স্টাইলিশ এবং রেসপন্সিভ বাটন তৈরির জন্য তৈরি করা কিছু ক্লাস প্রদান করে। এছাড়া, আপনি বাটনগুলিকে গ্রুপ করেও ব্যবহার করতে পারেন, যা বিভিন্ন কনটেক্সটে কাজে লাগে, যেমন ফর্ম বা নেভিগেশন মেনু।

Pure.CSS Buttons

Pure.CSS এর মাধ্যমে বাটন তৈরি করা অনেক সহজ এবং এর জন্য কিছু নির্দিষ্ট ক্লাস রয়েছে। নিচে Pure.CSS Buttons তৈরি করার জন্য কিছু বেসিক উদাহরণ দেওয়া হল:

1. বেসিক বাটন

Pure.CSS ব্যবহার করে বেসিক একটি বাটন তৈরি করতে পারেন:

<button class="pure-button">Click Me</button>

এখানে pure-button ক্লাস ব্যবহার করা হয়েছে, যা বাটনটিকে একটি সুন্দর ডিজাইন দেবে।

2. Primary Button

যদি আপনি একটি প্রাইমারি বা হাইলাইটেড বাটন চান, তবে pure-button-primary ক্লাস ব্যবহার করতে হবে:

<button class="pure-button pure-button-primary">Primary Button</button>

এটি বাটনটিকে এক্সট্রা স্টাইল এবং সিএসএস ইফেক্টস যোগ করবে।

3. Secondary Button

Secondary button তৈরি করার জন্য আপনি pure-button-secondary ক্লাস ব্যবহার করতে পারেন:

<button class="pure-button pure-button-secondary">Secondary Button</button>

4. Button with Hover Effect

Pure.CSS বাটনগুলিতে হোভার ইফেক্ট স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত থাকে। আপনি যদি মাউস হোভার করলে বাটনের স্টাইল পরিবর্তন দেখতে চান, এটি Pure.CSS দিয়ে খুব সহজে করা যায়।

<button class="pure-button pure-button-primary">Hover Button</button>

হোভার করার পর বাটনের ব্যাকগ্রাউন্ড কালার এবং স্টাইল পরিবর্তিত হবে।

5. Button with Disabled State

একটি disabled বাটন তৈরি করার জন্য, আপনাকে disabled অ্যাট্রিবিউটটি বাটনের সাথে ব্যবহার করতে হবে:

<button class="pure-button pure-button-primary" disabled>Disabled Button</button>

এটি বাটনটিকে অকার্যকর এবং স্টাইলের মাধ্যমে আলাদা দেখাবে।

Pure.CSS Button Groups

যখন আপনি একাধিক বাটন একসাথে গ্রুপ করতে চান, তখন Button Groups ব্যবহার করা হয়। Pure.CSS এ বাটন গ্রুপ করার জন্য pure-button-group ক্লাস ব্যবহার করা হয়। এটি বাটনগুলিকে পাশাপাশি একত্রিত করে।

1. Basic Button Group

<div class="pure-button-group">
  <button class="pure-button">Button 1</button>
  <button class="pure-button">Button 2</button>
  <button class="pure-button">Button 3</button>
</div>

এখানে, তিনটি বাটন একত্রিত হয়ে একটি গ্রুপ তৈরি হবে। এটি একটি সাধারণ বাটন গ্রুপ।

2. Button Group with Different Button Types

আপনি বিভিন্ন ধরনের বাটন (প্রাইমারি, সেকেন্ডারি) ব্যবহার করে গ্রুপ করতে পারেন:

<div class="pure-button-group">
  <button class="pure-button pure-button-primary">Primary</button>
  <button class="pure-button pure-button-secondary">Secondary</button>
  <button class="pure-button">Default</button>
</div>

এখানে, প্রথম বাটন প্রাইমারি, দ্বিতীয়টি সেকেন্ডারি, এবং তৃতীয়টি বেসিক বাটন হিসেবে থাকবে। এর ফলে একটি স্টাইলিশ বাটন গ্রুপ তৈরি হবে।

3. Stacked Button Group

যদি আপনি বাটনগুলোকে ভেতরের দিকে স্ট্যাক করতে চান, তবে আপনি pure-button-group stacked ক্লাস ব্যবহার করতে পারেন:

<div class="pure-button-group pure-button-group-stacked">
  <button class="pure-button pure-button-primary">Button 1</button>
  <button class="pure-button pure-button-secondary">Button 2</button>
  <button class="pure-button">Button 3</button>
</div>

এটি বাটনগুলোকে একে একে স্ট্যাক করবে, যেমন একটি কলাম লেআউট।

Button Groups এবং Responsive Design

Pure.CSS এর গ্রিড সিস্টেম এবং রেসপন্সিভ প্রপার্টি ব্যবহার করে, আপনি বাটন গ্রুপগুলোকে রেসপন্সিভ করতে পারেন, যাতে তারা বিভিন্ন স্ক্রীন সাইজে সঠিকভাবে প্রদর্শিত হয়।

1. Responsive Button Group

<div class="pure-button-group pure-g">
  <button class="pure-button pure-u-1-1 pure-u-md-1-3">Button 1</button>
  <button class="pure-button pure-u-1-1 pure-u-md-1-3">Button 2</button>
  <button class="pure-button pure-u-1-1 pure-u-md-1-3">Button 3</button>
</div>

এখানে, বাটনগুলি মোবাইল স্ক্রীনে পুরো প্রস্থ (100%) নিবে, কিন্তু মিডিয়াম এবং বড় স্ক্রীনে তিনটি কলামে বিভক্ত হবে। pure-u-1-1 এবং pure-u-md-1-3 ক্লাস ব্যবহার করা হয়েছে।

Pure.CSS-এর বাটন এবং বাটন গ্রুপগুলি ব্যবহার করা খুবই সহজ এবং কার্যকরী। এর মডুলার এবং লাইটওয়েট প্রকৃতি সবার জন্য একটি আদর্শ অপশন, বিশেষত যারা দ্রুত এবং সিম্পল ডিজাইন চান। আপনি যদি একাধিক বাটন একটি গ্রুপে রাখতে চান, তাহলে pure-button-group এবং pure-button-group-stacked ক্লাসগুলি ব্যবহার করে সেগুলিকে স্টাইল করতে পারেন। Pure.CSS আপনাকে গ্রিড, স্টাইল এবং রেসপন্সিভ ডিজাইনগুলি সহজে কাস্টমাইজ করতে সহায়তা করবে।

Pure.CSS একটি মিনিমালিস্ট CSS ফ্রেমওয়ার্ক, যা বেসিক এবং কার্যকরী ডিজাইন উপাদান প্রদান করে। এর মধ্যে বাটন স্টাইলিংও অন্তর্ভুক্ত রয়েছে, যা ব্যবহার করে আপনি সহজে বিভিন্ন বাটন তৈরি করতে পারেন। Pure.CSS এর ডিফল্ট বাটন স্টাইলগুলি খুবই সিম্পল এবং ক্লিন, তবে আপনি প্রয়োজন অনুসারে এগুলিকে কাস্টমাইজ করতে পারেন।

Pure.CSS Default Button Styles:

Pure.CSS-এ ডিফল্টভাবে কিছু বেসিক বাটন স্টাইলস প্রদান করা হয়। এগুলি খুবই মিনিমালিস্ট এবং ব্যবহার করা সহজ। এখানে কিছু সাধারণ ডিফল্ট বাটন স্টাইল এবং তাদের ব্যবহার দেওয়া হলো।

1. Basic Button:

Pure.CSS এর ডিফল্ট বাটন স্টাইলটি খুবই সিম্পল এবং সুন্দর। আপনি এটি খুব সহজে যেকোনো HTML ফাইলের মধ্যে ব্যবহার করতে পারেন।

<button class="pure-button">Default Button</button>

এই বাটনটি সাদা ব্যাকগ্রাউন্ড, সিম্পল বর্ডার এবং ব্লু হোভার ইফেক্ট সহ একটি সাধারণ বাটন তৈরি করবে।

2. Primary Button:

Pure.CSS এ একটি primary বাটন ক্লাসও রয়েছে, যা আপনাকে আরও দৃশ্যমান বাটন তৈরি করতে সাহায্য করে। এটি সাধারণ বাটনটির তুলনায় আরও হাইলাইটেড এবং প্রাধান্য পায়।

<button class="pure-button pure-button-primary">Primary Button</button>

ব্যাখ্যা:

• pure-button-primary ক্লাসটি বাটনের ব্যাকগ্রাউন্ড রঙকে একটি প্রাধান্যপূর্ণ রঙে পরিবর্তন করে, যেমন সাধারণত এটি নীল বা অন্য কোনো ব্রাইট কালারে রেন্ডার হয়।

3. Button with Borders:

আপনি যদি বর্ডার সহ বাটন চান, তাহলে pure-button ক্লাসের সাথে pure-button-primary বা pure-button-secondary ব্যবহার করতে পারেন।

<button class="pure-button pure-button-primary pure-button-bordered">Primary Bordered Button</button>

এটি সাধারণ বাটনের মতো, তবে বর্ডারের মাধ্যমে আরো দৃশ্যমান এবং স্টাইলিশ হয়ে থাকে।

4. Secondary Button:

Secondary বাটনটি সাধারণত সাধারণ বাটনের তুলনায় কিছুটা ডিমের এবং নরম দেখতে হয়।

<button class="pure-button pure-button-secondary">Secondary Button</button>

এটি সাধারণ বাটনের সাথে তুলনায় কম প্রাধান্য দেয়, তবে ব্যবহারকারীকে সিগনিফিকেন্ট বিকল্পের হিসেবে দেখাতে পারে।

5. Button with Active State:

Pure.CSS একটি active স্টেটও প্রদান করে, যা বাটনের উপর ক্লিক করলে এক ধরনের ইফেক্ট দেখায়। এটি বাটনের ডিজাইনে একটি অ্যাকশন ইফেক্ট যোগ করে।

<button class="pure-button pure-button-primary pure-button-active">Active Button</button>

6. Button with Disabled State:

Pure.CSS আপনাকে disabled স্টেটের বাটন তৈরি করার সুযোগও দেয়, যা সাধারণত ইনপুট ফর্মের জন্য ব্যবহৃত হয় যখন বাটনটি একটিভ থাকে না।

<button class="pure-button pure-button-disabled" disabled>Disabled Button</button>

এটি একটি নিষ্ক্রিয় বাটন তৈরি করবে যা ব্যবহারকারীরা ক্লিক করতে পারবেন না।

কাস্টমাইজেশন

যদিও Pure.CSS-এর ডিফল্ট বাটন স্টাইলস বেশ সুন্দর, তবে আপনি আপনার প্রয়োজন অনুসারে এগুলিকে কাস্টমাইজ করতে পারেন। Pure.CSS ক্লাসগুলির সাহায্যে বাটনের আকার, রঙ এবং অন্যান্য স্টাইলিং পরিবর্তন করা সম্ভব।

Customizing Button Example:

<style>
  .custom-button {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: 2px solid #4CAF50; /* Green border */
    padding: 10px 20px; /* Padding */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    display: inline-block; /* Align inline */
    font-size: 16px; /* Font size */
    border-radius: 5px; /* Rounded corners */
    transition: background-color 0.3s ease; /* Smooth hover effect */
  }
  .custom-button:hover {
    background-color: #45a049; /* Darker green on hover */
  }
</style>

<button class="custom-button">Custom Green Button</button>

এখানে, একটি কাস্টম বাটন তৈরি করা হয়েছে, যা Pure.CSS এর সাধারণ বাটনের স্টাইল থেকে ভিন্ন। এটি একটি গোলাকার কোণ, প্যাডিং এবং স্মুথ হোভার ইফেক্ট প্রস্তাব করছে।

Pure.CSS এর ডিফল্ট বাটন স্টাইলগুলি অত্যন্ত সরল এবং সহজে ব্যবহারযোগ্য। এগুলোর মাধ্যমে আপনি মিনিমালিস্ট ওয়েব ডিজাইন তৈরি করতে পারেন। এই বাটনগুলো হালকা এবং দ্রুত লোড হয়, যা আপনার ওয়েব অ্যাপ্লিকেশনকে আরও দ্রুত এবং দক্ষ করে তোলে। যদি আপনি আরও কাস্টমাইজেশন চান, তাহলে Pure.CSS এর স্টাইলের সাথে নিজের স্টাইল যোগ করতে পারেন।

Pure.CSS একটি হালকা ওজনের CSS ফ্রেমওয়ার্ক যা ওয়েব ডেভেলপারদের জন্য বেশ কিছু তৈরি করা উপাদান এবং স্টাইল প্রদান করে। এর মধ্যে একটি গুরুত্বপূর্ণ উপাদান হল Button। Pure.CSS এ Button Size, Disabled Buttons, এবং Active States এর জন্য আগেই প্রস্তুত স্টাইল এবং ক্লাস রয়েছে যা আপনাকে দ্রুত এবং সহজভাবে বাটন ডিজাইন করতে সাহায্য করবে।

এখানে, Pure.CSS এর Button Size, Disabled Buttons, এবং Active States এর ব্যবহার এবং কাস্টমাইজেশন সম্পর্কে বিস্তারিত আলোচনা করা হবে।

1. Button Size

Pure.CSS এ বাটনের জন্য বিভিন্ন আকারের অপশন রয়েছে। আপনি বাটনের সাইজ small, large, অথবা default সেট করতে পারেন।

Default Button Size:

Pure.CSS-এ ডিফল্ট বাটন সাইজ যথাযথভাবে স্টাইল করা থাকে, এবং যদি আপনি কোনও সাইজ না উল্লেখ করেন, তবে এটি সাধারণ আকারের হবে।

<button class="pure-button">Default Button</button>

Small Button Size:

ছোট সাইজের বাটন তৈরি করতে, আপনি pure-button-small ক্লাস ব্যবহার করতে পারেন।

<button class="pure-button pure-button-small">Small Button</button>

Large Button Size:

বড় সাইজের বাটন তৈরি করতে, আপনি pure-button-large ক্লাস ব্যবহার করতে পারেন।

<button class="pure-button pure-button-large">Large Button</button>

এখানে:

• pure-button হল বাটনের ডিফল্ট স্টাইল।
• pure-button-small এবং pure-button-large বাটনের আকার ছোট এবং বড় করে।

2. Disabled Buttons

Disabled Buttons হল এমন বাটন যা ব্যবহারকারীর দ্বারা ক্লিক করা যায় না, এবং সাধারণত এটি ছিন্ন বা বিবর্ণ হয়ে থাকে। Pure.CSS এ আপনি সহজেই একটি বাটনকে ডিসেবল (অকার্যকর) করতে পারেন।

Disabled Button Example:

<button class="pure-button" disabled>Disabled Button</button>

এখানে:

• disabled অ্যাট্রিবিউট যোগ করার মাধ্যমে বাটনটি ডিসেবল হয়ে যাবে এবং এর স্টাইলও পরিবর্তিত হবে (বাটনটি ধূসর বা ছন্ন হয়ে যাবে)।

3. Active States

Active State বাটন ক্লিক করার পর, এটি ব্যবহারকারীর সাথে ইন্টারঅ্যাকশন শো করার জন্য ব্যবহৃত হয়। Pure.CSS বাটনের জন্য স্বয়ংক্রিয়ভাবে একটি একটিভ স্টেট প্রদান করে, যা ব্যবহারকারীর ক্লিক করার পরে দৃশ্যমান হয়।

Active Button State Example:

<button class="pure-button pure-button-primary">Active Button</button>

এখানে, pure-button-primary ক্লাসটি বাটনটির জন্য একটি প্রাইমারি স্টাইল প্রদান করে এবং যখন ব্যবহারকারী এই বাটনে ক্লিক করে, তখন এটি সক্রিয় বা "active" অবস্থায় থাকবে।

Customizing Active State:

Pure.CSS বাটনের জন্য আপনি কাস্টম active স্টাইলও প্রয়োগ করতে পারেন যদি প্রয়োজন হয়।

<style>
  .pure-button:active {
    background-color: #ff9800;
    color: white;
  }
</style>

<button class="pure-button">Custom Active State</button>

এখানে, :active সেলেক্টর ব্যবহার করা হয়েছে, যা বাটনটি ক্লিক করার সময় ব্যাকগ্রাউন্ড কালার পরিবর্তন করবে।

4. Button Variants (Buttons with Different Styles)

Pure.CSS বাটনগুলির জন্য কিছু পূর্বনির্ধারিত স্টাইলও প্রদান করে। আপনি বিভিন্ন ধরনের বাটন তৈরি করতে পারেন, যেমন primary, secondary, success, warning, danger, ইত্যাদি।

Primary Button:

<button class="pure-button pure-button-primary">Primary Button</button>

Secondary Button:

<button class="pure-button pure-button-secondary">Secondary Button</button>

Success Button:

<button class="pure-button pure-button-success">Success Button</button>

Danger Button:

<button class="pure-button pure-button-danger">Danger Button</button>

Summary

Pure.CSS এর বাটনগুলি সহজে কাস্টমাইজযোগ্য এবং বিভিন্ন আকার এবং স্টাইল সরবরাহ করে:

• Button Size: আপনি pure-button-small এবং pure-button-large ক্লাস ব্যবহার করে বাটনের আকার নিয়ন্ত্রণ করতে পারেন।
• Disabled Buttons: disabled অ্যাট্রিবিউট ব্যবহার করে আপনি বাটনটিকে নিষ্ক্রিয় করতে পারেন।
• Active States: বাটনের :active পসিবল স্টাইলগুলি ব্যবহার করে একটি "active" ইন্টারঅ্যাকশন স্টেট তৈরি করতে পারেন।
• Button Variants: Pure.CSS বিভিন্ন ধরনের বাটন স্টাইল (যেমন primary, secondary, success, danger) সরবরাহ করে।

এই ফিচারগুলির মাধ্যমে, আপনি আপনার ওয়েব অ্যাপ্লিকেশন বা ওয়েবসাইটের বাটনগুলিকে অত্যন্ত কার্যকরী, সুন্দর এবং ব্যবহারকারী বান্ধব করতে পারবেন। Pure.CSS এর হালকা ও সহজ স্টাইলিং আপনার ওয়েব পেজকে দ্রুত লোড করতে সাহায্য করবে, এবং এর গ্রহনযোগ্য স্টাইলিং দিয়ে আপনি সহজেই প্রফেশনাল লুক তৈরি করতে পারবেন।

Pure.CSS এর সাহায্যে Button Groups তৈরি করা খুবই সহজ এবং কার্যকরী। Button Groups হল একটি গ্রুপ যা একাধিক বাটনকে একত্রিত করে একটি ইউনিফর্ম ব্লকের মধ্যে দেখায়। সাধারণত, যখন আপনি একাধিক সম্পর্কিত বাটন ব্যবহার করতে চান, যেমন ফিল্টার বাটন বা অপশন বাটন, তখন বাটন গ্রুপ ব্যবহার করা হয়।

Pure.CSS-এ Button Groups তৈরি করার জন্য কিছু মৌলিক পদক্ষেপ:

Pure.CSS আপনাকে একটি সহজ এবং লাইটওয়েট স্টাইলিং প্রদান করে, যা আপনাকে বাটন গ্রুপ দ্রুত তৈরি করতে সহায়তা করে। নিচে এর মাধ্যমে একটি Button Group তৈরি করার উদাহরণ দেওয়া হলো।

Button Group এর সাধারণ স্টাইল:

Pure.CSS নিজে থেকে বাটন গ্রুপের জন্য কোনো বিশেষ স্টাইলিং প্রদান না করলেও, আপনি সিম্পল CSS ক্লাস ব্যবহার করে বাটন গ্রুপ তৈরি করতে পারবেন।

উদাহরণ: Button Group তৈরি করা

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pure.CSS Button Group</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    .button-group {
      display: inline-flex;
      margin: 10px;
    }

    .button-group .pure-button {
      border-radius: 0;
      margin-right: -1px; /* To remove gap between buttons */
    }

    .button-group .pure-button:last-child {
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class="button-group">
    <a href="#" class="pure-button pure-button-primary">Button 1</a>
    <a href="#" class="pure-button pure-button-primary">Button 2</a>
    <a href="#" class="pure-button pure-button-primary">Button 3</a>
  </div>
</body>
</html>

ব্যাখ্যা:

1. .button-group:
   • এখানে inline-flex ব্যবহার করা হয়েছে, যাতে বাটনগুলো একে অপরের পাশে থাকে। আপনি flexbox এর মাধ্যমে বাটনগুলিকে সোজা করে রাখতে পারবেন।
   • margin-right: -1px ব্যবহার করা হয়েছে বাটনগুলোর মধ্যে কোনো ফাঁকা জায়গা না থাকার জন্য।
2. pure-button:
   • Pure.CSS এর ক্লাস pure-button সাধারণ বাটন তৈরির জন্য ব্যবহৃত হয়।
   • pure-button-primary ক্লাসটি বাটনকে প্রাথমিক রঙের জন্য ব্যবহার করা হয়েছে (যেমন নীল বা অন্যান্য প্রাথমিক রঙ)।
3. Styling Last Button:
   • .pure-button:last-child ব্যবহার করে শেষ বাটনের জন্য মার্জিনটি তুলে নেওয়া হয়েছে, যাতে বাটন গ্রুপের মধ্যে অতিরিক্ত জায়গা না থাকে।

রেসপন্সিভ Button Groups:

Pure.CSS এর বাটন গ্রুপগুলো রেসপন্সিভ। আপনি চাইলে গ্রিড সিস্টেমের মাধ্যমে এগুলোকে আরও সুন্দরভাবে উপস্থাপন করতে পারেন। নিচে একটি রেসপন্সিভ বাটন গ্রুপের উদাহরণ দেওয়া হলো:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Button Group</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pure/2.0.6/pure-min.css">
  <style>
    /* Mobile-first button group styles */
    .button-group {
      display: inline-block;
      margin: 10px;
    }

    .button-group .pure-button {
      margin-right: 5px;
    }

    /* Responsive Button Group */
    @media (max-width: 600px) {
      .button-group {
        display: block;
      }

      .button-group .pure-button {
        width: 100%;
        margin-bottom: 5px;
      }

      .button-group .pure-button:last-child {
        margin-bottom: 0;
      }
    }
  </style>
</head>
<body>
  <div class="button-group">
    <a href="#" class="pure-button pure-button-primary">Button 1</a>
    <a href="#" class="pure-button pure-button-primary">Button 2</a>
    <a href="#" class="pure-button pure-button-primary">Button 3</a>
  </div>
</body>
</html>

ব্যাখ্যা:

1. Mobile-first Design:
   • গ্রুপের মধ্যে বাটনগুলো মোবাইল ডিভাইসে 100% width হবে, যাতে প্রত্যেকটি বাটন পুরো স্ক্রীন প্রস্থ নেবে এবং একের পর এক প্রদর্শিত হবে।
   • বড় স্ক্রীনে বাটনগুলো inline-block অবস্থায় থাকবে, অর্থাৎ তারা এক লাইনে থাকবে।
2. @media Query:
   • @media (max-width: 600px) মিডিয়া কুয়েরি ব্যবহার করে, ছোট স্ক্রীন বা মোবাইল ডিভাইসে বাটনগুলিকে সম্পূর্ণ স্ক্রীন প্রস্থে নিয়ে আসে।

বাটন গ্রুপের আরও কাস্টমাইজেশন:

• আপনি হোভার ইফেক্টস এবং হাইলাইটিং যোগ করে বাটন গ্রুপগুলোকে আরও আকর্ষণীয় করতে পারেন।
• অ্যানিমেশন বা ট্রানজিশন যোগ করে বাটনগুলির উপর কাস্টম ইফেক্ট তৈরি করা যেতে পারে।

উদাহরণ:

<a href="#" class="pure-button pure-button-primary" style="transition: background-color 0.3s;">Button 1</a>

এটি একটি বাটনে হোভার করলে কালারের পরিবর্তন হবে, যা একটি মসৃণ অ্যানিমেশন তৈরি করবে।

Pure.CSS এর মাধ্যমে Button Groups তৈরি করা খুবই সহজ এবং দ্রুত। Flexbox ব্যবহার করে বাটন গ্রুপের মধ্যে সঠিকভাবে বাটনগুলো সাজানো যায় এবং Pure.CSS এর স্টাইল ক্লাসগুলি খুবই সাধারণ এবং ব্যবহারযোগ্য। আপনি বাটন গ্রুপের ডিজাইন এবং ব্যবহারকৃত স্টাইলিং কাস্টমাইজ করে আপনার প্রয়োজন অনুযায়ী সহজেই গ্রুপ তৈরি করতে পারেন।

Pure.CSS একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক যা সহজ এবং কার্যকরী স্টাইলিং প্রদান করে। এটি ওয়েব ডেভেলপমেন্টে ব্যবহারকারী ইন্টারফেস তৈরি করতে সহায়ক, এবং Custom Button Styling ও Icon Buttons তৈরি করার জন্য উপযুক্ত। এখানে Custom Button Styling এবং Icon Buttons কিভাবে Pure.CSS এর মাধ্যমে তৈরি করা যায়, তা নিয়ে বিস্তারিত আলোচনা করা হয়েছে।

1. Custom Button Styling with Pure.CSS:

Custom buttons সাধারণত প্যাডিং, বর্ডার, ব্যাকগ্রাউন্ড কালার, টেক্সট স্টাইলিং এবং হোভার ইফেক্ট দ্বারা কাস্টমাইজ করা হয়। Pure.CSS আপনাকে বেসিক স্টাইলিং সেট করতে সাহায্য করে, তবে আপনি চাইলে আপনার নিজস্ব ডিজাইন এবং স্টাইলিং যোগ করতে পারেন।

Custom Button Styling Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Button Styling with Pure.CSS</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
  <style>
    /* Custom Button Styling */
    .custom-btn {
      padding: 10px 20px;
      font-size: 16px;
      border: 2px solid #4CAF50;
      background-color: #4CAF50;
      color: white;
      border-radius: 5px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s;
    }

    .custom-btn:hover {
      background-color: white;
      color: #4CAF50;
    }

    .custom-btn:focus {
      outline: none;
      box-shadow: 0 0 0 2px #4CAF50;
    }
  </style>
</head>
<body>

  <a href="#" class="custom-btn">Custom Button</a>

</body>
</html>

ব্যাখ্যা:

1. .custom-btn ক্লাস: এটি বাটনের মূল স্টাইল। এখানে বর্ডার, ব্যাকগ্রাউন্ড কালার, প্যাডিং, ফন্ট সাইজ ইত্যাদি কাস্টমাইজ করা হয়েছে।
2. হোভার ইফেক্ট: :hover পসুডো ক্লাস ব্যবহার করে বাটন হোভার করার সময় ব্যাকগ্রাউন্ড এবং টেক্সট কালার পরিবর্তন করা হয়েছে।
3. ফোকাস স্টাইলিং: :focus পসুডো ক্লাস ব্যবহার করে, বাটনটি যদি ফোকাস হয় (যেমন ট্যাব প্রেস করার সময়) তবে এর আশেপাশে একটি আউটলাইন অ্যাড করা হয়েছে।

2. Icon Buttons with Pure.CSS:

Icon buttons সাধারণত বাটনের মধ্যে একটি আইকন (যেমন FontAwesome, Material Icons, বা SVG আইকন) ব্যবহার করে তৈরি করা হয়। Pure.CSS তে এই ধরনের বাটন তৈরি করতে আপনি একটি আইকন লাইব্রেরি ব্যবহার করতে পারেন।

Icon Button Example with FontAwesome:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Icon Buttons with Pure.CSS</title>
  <link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <style>
    /* Icon Button Styling */
    .icon-btn {
      padding: 10px 20px;
      font-size: 18px;
      border: 2px solid #4CAF50;
      background-color: #4CAF50;
      color: white;
      border-radius: 5px;
      text-align: center;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background-color 0.3s, color 0.3s;
    }

    .icon-btn:hover {
      background-color: white;
      color: #4CAF50;
    }

    .icon-btn i {
      margin-right: 8px; /* Spacing between icon and text */
    }
  </style>
</head>
<body>

  <a href="#" class="icon-btn">
    <i class="fas fa-plus"></i> Add Item
  </a>

  <a href="#" class="icon-btn">
    <i class="fas fa-trash-alt"></i> Delete Item
  </a>

</body>
</html>

ব্যাখ্যা:

1. FontAwesome: এখানে FontAwesome আইকন লাইব্রেরি ব্যবহার করা হয়েছে। আপনি অন্যান্য আইকন লাইব্রেরি (যেমন Material Icons বা Bootstrap Icons)ও ব্যবহার করতে পারেন।
2. <i> ট্যাগ: আইকনটি i ট্যাগের মধ্যে রাখা হয়েছে, এবং fas fa-plus অথবা fas fa-trash-alt ক্লাস ব্যবহার করে আইকনগুলো প্রদর্শিত হচ্ছে।
3. .icon-btn ক্লাস: আইকন বাটনটির স্টাইলিং করেছে। বাটনের সাথে আইকনটি সেন্টার করা হয়েছে এবং টেক্সট এবং আইকনের মধ্যে মার্জিন দেয়া হয়েছে।

3. Customizing Icon Buttons Further:

আপনি আইকন বাটনগুলিকে আরও কাস্টমাইজ করতে পারেন বিভিন্ন স্টাইলিং অপশন ব্যবহার করে, যেমন:

• আইকন সাইজ পরিবর্তন: font-size প্রপার্টি দিয়ে আইকনের আকার কাস্টমাইজ করতে পারেন।
• ব্যাকগ্রাউন্ড কালার পরিবর্তন: হোভার ইফেক্ট ব্যবহার করে ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে পারেন।
• অ্যানিমেশন: আইকনে বিভিন্ন অ্যানিমেশন যোগ করতে পারেন, যেমন আইকনটি বড় বা ছোট হওয়া।

Additional Customizations Example:

<i class="fas fa-shopping-cart" style="font-size: 30px;"></i>

এখানে, আইকনটির সাইজ বাড়ানোর জন্য font-size প্রপার্টি ব্যবহার করা হয়েছে।

Pure.CSS দিয়ে Custom Button Styling এবং Icon Buttons তৈরি করা সহজ এবং কার্যকরী। Pure.CSS আপনাকে সরলতা এবং দ্রুত ডেভেলপমেন্টের সুবিধা প্রদান করে, যেখানে আপনি প্রয়োজনীয় কাস্টম স্টাইল এবং ফিচারগুলো সংযুক্ত করতে পারেন। Custom buttons এবং icon buttons ব্যবহার করে আপনি আরও সুন্দর এবং ইউজার-ফ্রেন্ডলি ওয়েব ইন্টারফেস তৈরি করতে পারবেন।